<template>
  <div style="margin: 0 auto;">
    <y-header />
    <div id="content" class="content">
      <div v-if="false" class="now">
        <a>当前位置：</a>
        <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
        <i class="iconfont"></i>
        <nuxt-link :to="{name: 'post-list'}" class="now_weight">资讯公告</nuxt-link>
      </div>
      <div class="center_content">
        <div id="elList">
          <div class="news">
            <div class="title">{{ postData.mingcheng }}</div>
            <div class="info m-t-sm">
              <span v-if="postData.zhuanzaiwangzhi && postData.zhuanzaiwangzhi.length > 0" class="source">
                <a :href="postData.zhuanzaiwangzhi" target="_blank">转载</a>
              </span>
              <span v-else class="source">原创</span>
              <span class="" time="">{{ formatDat(postData.gmtCreate) }}</span>
            </div>
            <div class="article" v-html="postData.content" />
          </div>
        </div>
        <div v-if="false" id="attachment">
          <p class="attachment-download"><i class="iconfont icon-attachment"></i>附件下载：</p>
          <ul>
            <li><a href=" /file?id=69487 ">第二批国家级一流本科课程公示名单.pdf</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import YHeader from '@/components/common/Header.vue'
import { postDetail } from '@/api/course'

export default {
  components: {
    YHeader
  },
  async asyncData(context) {
    try {
      const result = {}
      result.postData = await postDetail({ id: context.params.id, preview: context.query.preview })
      return result
    } catch (e) {
      console.error(e)
      context.error({ message: 'Data not found', statusCode: 404 })
    }
  },
  methods: {
    from(d) {
      if (d && d.length >= 10) {
        return '转载'
      }
      return '原创'
    },
    formatDat(d) {
      if (d && d.length >= 10) {
        return d.substring(0, 10)
      }
      return d
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.content, .center_box {
  margin: 0;
  padding: 0;
  margin: 0 auto;
  min-width: 1200px;
  width: 100%;

  font-size: 14px;
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}
.center_content {
  min-height: calc(100vh - 180px );
  margin: 15px auto 15px;
  width: 1200px;
  background:#fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 0 2px 2px rgb(0 0 0 / 2%);
}

.now {
  color: #959595;
  width:1200px;
  margin: 20px auto;
}

.now a {
  color: #959595;
  margin: 0 5px;
  vertical-align: middle;
}

.now .iconfont {
  font-size: 14px;
  vertical-align: middle;
}

.now .now_weight {
  color: #333;
  font-weight:500;
}

.center_content .news {
  padding: 20px 0;
}

.center_content .news .title {
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #F2F2F2;
  padding-bottom: 25px;
}

.center_content .news .info {
  text-align:center;
  color: #959595;
  margin-top: 10px;
}

.center_content .news .info span.source {
  margin-right: 10px;
}

.center_content .news .article {
  margin:20px 0;
  line-height:2em;
  color:#444;
  font-size:14px;
  word-break: break-all;
}

.center_content .news .article a {
  color: #2e82ff
}

.center_content .news .article p {
  text-indent:2em;
  margin-bottom:10px;
}

.center_content .news .article img {
  max-width: 100%;
  margin:10px auto;
  display: block;
}

.center_content #attachment li {
  margin-top: 10px;
}

.attachment-download i {
  margin-right:8px;
}

#attachment a {
  color:#555;
}
/* è¯„è®ºæ¡†ç›¸å…³ */
.infoEvaBox {
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-top: 20px;
  overflow: hidden;
}

.evaContent {
  display: block;
  font-family: inherit;
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  line-height: 1.4;
  background-color: #f9f9f9;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  color: #999;
  outline: none;
  resize: none;
  margin-bottom: 20px;
}

.evaContent:focus {
  border-color: #2f7cee;
  color: #333;
}

.btn_subEva {
  cursor: pointer;
  display: block;
  border: none;
  padding: 12px 14px;
  line-height: 1;
  border-radius: 3px;
  outline: none;
  box-sizing: border-box;
  background-color: #4976e8;
  color: #fff;
  float: right;
}

video::-internal-media-controls-download-button {
  display:none;
}

video::-webkit-media-controls-enclosure {
  overflow:hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}

#attachment {
  border-top: 1px solid #f2f2f2;
  margin-top: 20px;
  padding-top: 20px;
}
</style>
